<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹弹弹</title>
	<style type="text/css">

.img{
	position:absolute;
	top:0px;
	left:0px;
	width:150px;
	height:150px;
}



	</style>
	<script type="text/javascript">



window.onload = function(){
	createMovingImg();
}

document.onclick = function(event) {
	var click_x = event.clientX;
	var click_y = event.clientY;
	createMovingImg(click_y,click_x);
}


function createMovingImg(y,x) {
	

	//创建图片
	var oImg = document.createElement('img');
	oImg.src = 'huaji.gif';
	oImg.className = 'img';
	document.body.appendChild(oImg);
	//获得图片大小	
	oImg.width = parseInt(getStyle(oImg,'width'));
	oImg.height = parseInt(getStyle(oImg,'height'));
	//设定速度
	oImg.speedX = Math.random()*10;
	oImg.speedY = Math.random()*10;
	//设定图片位置
	y = ((y && y > oImg.height/2 && y < window.innerHeight-oImg.height/2) 
			? y - oImg.height/2 
			: (y > window.innerHeight/2 ? window.innerHeight-oImg.height : 11));
	x = ((x && x > oImg.width/2 && x < window.innerWidth-oImg.width/2) 
			? x - oImg.width/2 
			: (x > window.innerWidth/2 ? window.innerWidth-oImg.width : 11));
	oImg.style.top = y + 'px';
	oImg.style.left = x + 'px';
	
	//设置图片onmouseover事件
	oImg.onmouseover = function(event) {

		var x = event.clientX;
		var y = event.clientY;
		if (x > parseInt(oImg.style.left)+oImg.width/2) {
			oImg.speedX = Math.abs(oImg.speedX) * -2;
		} else {
			oImg.speedX = Math.abs(oImg.speedX) * 2;
		}
			if (y > parseInt(oImg.style.top)+oImg.height/2) {
			oImg.speedY = Math.abs(oImg.speedY) * -2;
		} else {
			oImg.speedY = Math.abs(oImg.speedY) * 2;
		}
		subSpeed(oImg);
	}

	
	//设置onclick事件
	oImg.onclick = function(e) {
		// oImg.speedY *= -1;
		// oImg.speedX *= -1;
		this.parentNode.removeChild(this);
		var ev = e || event;
		ev.cancelBubble = true;
	}


	
	//移动图片
	imgMove(oImg);

}



	//定时移动
function imgMove(obj) {

	obj.timeId = setInterval(function(){
										
									//获得元素位置
									var top = parseInt(getStyle(obj,'top'));
									var left = parseInt(getStyle(obj,'left'));
									//判断
									if (top+obj.height+obj.speedY > window.innerHeight || top < 10) {
										obj.speedY *= -1;
										obj.style.top = '11px';
									}
									if (left+obj.width+obj.speedX > window.innerWidth || left < 10) {
										obj.speedX *= -1;
										obj.style.left = '11px';
									}
									//移动
									obj.style.top = top+obj.speedY+'px';
									obj.style.left = left+obj.speedX+'px';

									},100);
}

//获得样式
function getStyle(obj,attr) {
	if (typeof(obj.currentStyle) == 'undefined') {
		return getComputedStyle(obj,null)[attr]
	} else {
		return obj.currentStyle[attr];
	}
}	

//球球速度逐渐减慢
function subSpeed(obj) {
	var timeId = setTimeout(function(){
											obj.speedX = obj.speedX/2
											obj.speedY = obj.speedY/2
									},100);
}



	</script>
</head>
<body bgcolor="white">

	
</body>
</html>